<template>
  <el-row :gutter="16" class="box">
    <el-col :span="10" class="grid-content">
      <div class="bg-purple" style="background: #fff">
        <div class="">
          <el-cascader
            class="warehouse"
            size="small"
            v-model="house"
            :options="houseTree"
            :props="{
              label:'nodeName',
              value: 'id'
            }"
            @change="handleChange"></el-cascader>

          <div class="list-box">
            <table class="mijijia" cellpadding="5" v-loading="loading">
              <tr v-for="(row, indexRow) in mjjData" :key="indexRow">
                <td v-for="(column, indexColumn) in row.row" :key="indexColumn">
                  <div class="cell"
                       :class="{'active': column.isArc === 1, 'active-changed': activeNum === (column.id + '' + column.idColumn)}"
                       @click="handleCell(column)">
                    <i class="el-icon-success"></i>
                    {{indexRow+1}}-{{indexColumn+1}}
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>

        <div class="unknown">
          <div class="unknown-box">
            <div class="list-box" v-if="isRuku">
              <el-table
                :data="arcData"
                border
                style="width: 100%"
                height="calc(100vh - 350px)"
                v-loading="arcLoading"
                class="table">
                <el-table-column
                  align="center"
                  fixed="left"
                  type="selection"
                  width="60">
                </el-table-column>
                <el-table-column
                  align="center"
                  type="index"
                  label="序号"
                  width="60">
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="dh"
                  label="档号">
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="categoryName"
                  label="门类">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  align="center"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleOut(scope.row)">出库</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>

      </div>
    </el-col>
    <el-col :span="14" class="grid-content">
      <div class="bg-purple">
        <div class="head-search">
          <search @onSubmit="onSearch">
            <el-form-item label="门类">
              <el-select v-model="idCategory" clearable size="small" placeholder="请选择">
                <el-option v-for="(item, index) in treeCategoryData"
                           :key="index"
                           :label="item.categoryName"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="全宗号">
              <el-input placeholder="请输入内容" clearable v-model="searchData.qzh" size="small"></el-input>
            </el-form-item>
            <el-form-item label="目录号">
              <div class="inline">
                <el-input placeholder="请输入内容" clearable v-model="searchData.mlh.begin" size="small"></el-input>
                <span>至</span>
                <el-input placeholder="请输入内容" clearable v-model="searchData.mlh.end" size="small"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="归档年度">
              <div class="inline">
                <el-input placeholder="请输入内容" clearable v-model="searchData.gdnd.begin" size="small"></el-input>
                <span>至</span>
                <el-input placeholder="请输入内容" clearable v-model="searchData.gdnd.end" size="small"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="保管期限">
              <el-select v-model="searchData.bgqx" clearable size="small" placeholder="请选择">
                <el-option v-for="(item, index) in safekeepingDate"
                           :key="index"
                           :label="item.dictLabel"
                           :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="案卷号/件号">
              <div class="inline">
                <el-input placeholder="请输入内容" clearable v-model="searchData.jh.begin" size="small"></el-input>
                <span>至</span>
                <el-input placeholder="请输入内容" clearable v-model="searchData.jh.end" size="small"></el-input>
              </div>
            </el-form-item>
          </search>
          <el-button :loading="inLoading" icon="el-icon-plus" @click="handleInLibrary('search')" class="btn" type="primary" size="small">入库</el-button>
        </div>

        <div class="list-box">
          <el-table
            :data="tableData"
            border
            v-loading="tableLoading"
            @selection-change="handleSelectionChange"
            height="calc(100vh - 210px)"
            class="table">
            <el-table-column
              type="selection"
              align="center"
              fixed="left"
              width="60">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="60">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="dh"
              label="档号"
              width="180">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="tm"
              label="题名"
              align="left"
              width="300">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="zrz"
              label="责任者">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="wh"
              label="文号">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="cwrq"
              label="成文时间">
            </el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="130">
              <template slot-scope="scope">
                <el-button type="text" @click="handleInLibrary(scope.row)">入库</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="Number(page.total)>0"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-sizes="[20, 40, 60, 80]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Number(page.total)">
          </el-pagination>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapActions } from 'vuex'
import Search from '../../../../components/search/search'
import { getArchivesDicId } from '../../../../api/dictionary/dictionary'
import {
  addArchivesIn, addArchivesOut,
  getArchivesInCategory,
  getArchivesInList, getDenseFrameArchivesInfo, getDenseFrameArchivesInfoLeft, getDenseFrameArchivesInfoRight,
  getHouseTree
} from '../../../../api/house/houseArchives'

export default {
  name: 'index',
  components: { Search },
  data () {
    return {
      isRuku: false, // 入库
      houseTree: [], // 库房树
      treeCategoryData: [], // 门类树
      safekeepingDate: [], // 保管期限
      tableLoading: false,
      loading: false,
      arcLoading: false,
      inLoading: false,
      mjjData: [], // 密集架数据
      arcData: [], // 密集架上的档案数据
      cellData: {}, // 选中密集架格子数据
      house: [], // 选中的库房、密集架、左右
      activeNum: '', // 选中的库房、密集架格子行+列
      treeValue: {}, // 选中库房树形的参数
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      idCategory: '',
      searchData: {
        qzh: '',
        mlh: {
          begin: '',
          end: ''
        },
        gdnd: {
          begin: '',
          end: ''
        },
        bgqx: '',
        jh: {
          begin: '',
          end: ''
        }
      },
      params: [], // 赛选条件
      tableData: [] // 列表数据
    }
  },
  mounted () {
    this.getTreeDoorClass()
    this.setNavNarrow(true)
  },
  methods: {
    ...mapActions('profile/navNarrow', ['setNavNarrow']),
    getTreeDoorClass () {
      // 获取库房树
      getHouseTree().then(res => {
        this.houseTree = res.data.data
      })
      // 获取门类
      getArchivesInCategory().then(res => {
        this.treeCategoryData = res.data.data
      })
      // 获取保管期限
      getArchivesDicId('retention_type').then(res => {
        this.safekeepingDate = res.data.data
      })
    },
    onSearch () {
      // 搜索
      this.params = []
      Object.keys(this.searchData).forEach((key) => {
        if (typeof (this.searchData[key]) === 'object') {
          if (this.searchData[key].begin || this.searchData[key].end) {
            this.params.push({
              name: key,
              op: 'between',
              values: [this.searchData[key].begin, this.searchData[key].end]
            })
          }
        } else if (this.searchData[key]) {
          this.params.push({
            name: key,
            op: key === 'bgqx' ? 'eq' : 'like',
            value: this.searchData[key]
          })
        }
      })
      if (!this.idCategory) {
        this.$message.warning('请选择门类！')
        return
      }

      this.getList()
    },
    getList () {
      this.tableLoading = true
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        params: [{
          name: 'is_rk',
          op: 'eq',
          value: 0
        }, {
          name: 'gdbs',
          op: 'eq',
          value: '3'
        }]
      }
      if (this.params.length > 0) {
        param.params = param.params.concat(this.params)
      }

      getArchivesInList(this.idCategory, param).then(res => {
        this.tableData = res.data.data.records
        this.page.total = res.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.pageNo = val
      this.getList()
    },
    handleChange (value) {
      this.treeValue = value
      this.loading = true
      this.isRuku = false
      let request = null
      if (value[2] === '0') {
        // 密集架左
        request = getDenseFrameArchivesInfoLeft(value[1])
      } else if (value[2] === '1') {
        // 密集架右
        request = getDenseFrameArchivesInfoRight(value[1])
      }
      request.then(res => {
        this.mjjData = res.data.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleCell (val) {
      // 选择密集架的格子
      this.cellData = val
      this.activeNum = val.id + '' + val.idColumn
      this.getArcList(val.id, val.idColumn)
    },
    getArcList (idRow, idColumn) {
      const param = {
        params: [{
          name: 'idRow',
          op: 'eq',
          value: idRow
        }, {
          name: 'idColumn',
          op: 'eq',
          value: idColumn
        }]
      }
      this.arcLoading = true
      getDenseFrameArchivesInfo(param).then(res => {
        this.isRuku = true
        this.arcData = res.data.data
        this.arcLoading = false
      }).catch(() => {
        this.arcLoading = false
      })
    },
    handleSelectionChange (selection) {
      // 勾选表格行
      this.tableSelected = selection
    },
    handleInLibrary (row) {
      // 入库
      if (row === 'search' && this.tableSelected.length !== 1) {
        this.$message.warning('请勾选一条数据进行入库操作！')
        return
      }
      if (!this.cellData.id) {
        this.$message.warning('请选择密集架格子进行入库操作！')
        return
      }
      let param = null
      if (row === 'search') {
        param = this.tableSelected[0]
      } else {
        param = row
      }
      param.idCategory = this.idCategory
      this.treeCategoryData.map(item => {
        if (this.idCategory === item.id) {
          param.categoryName = item.categoryName
        }
      })
      param.idArc = param.id
      param.idRepo = this.house[0]
      param.idShelving = this.house[1]
      param.idRow = this.cellData.id
      param.idColumn = this.cellData.idColumn
      param.orderNo = this.house[2]

      delete param.id

      this.inLoading = true
      addArchivesIn(param).then(res => {
        this.getList()
        this.getArcList(this.cellData.id, this.cellData.idColumn)
        this.handleChange(this.treeValue)
        this.$message.success('入库操作成功！')
        this.inLoading = false
      }).catch(() => {
        this.inLoading = false
      })
    },
    handleOut (row) {
      // 出库
      this.outLoading = true
      addArchivesOut(row).then(res => {
        this.$message.success('出库操作成功！')
        if (this.idCategory) {
          this.getList()
        }
        this.handleChange(this.treeValue)
        this.getArcList(this.cellData.id, this.cellData.idColumn)
        this.outLoading = false
      }).catch(() => {
        this.outLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../styles/mixin";
  .box {
    .bg-purple {
      background: #fff;
      border-radius: 5px;
      overflow-y: auto;
      height: calc(100vh - 80px);
    }

    .warehouse {
      padding: 15px 0;
      margin-left: 20px;
    }

    .bg-one {

    }

    .unknown {
      padding: 15px;
      height: 50%;
      background: #fff;
      margin-top: 20px;

      .unknown-box {
        height: calc(100vh - 480px);
      }
    }

    .head-search {
      padding: 15px 0 0 15px;
      align-items: flex-end;

      ::v-deep .search-btn {
        margin-top: 0;
      }

      .btn {
        position: relative;
        top: -12px;
        right: 10px;
      }

      .inline {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          padding: 0 10px;
        }
      }
    }

    .mijijia {

      .cell {
        background: #e7e7e7;
        @include sc(16px, #000);
        @include wh(150px, 60px);
        text-align: center;
        line-height: 60px;
        cursor: pointer;
        position: relative;
        .el-icon-success{
          position: absolute;
          top: 0;
          right: 0;
          color: #409EFF;
          font-size: 22px;
          display: none;
        }
        &:hover{
          opacity: 0.8;
        }
        &.active{
          background: #a47320;
          color: #fff;
        }
        &.active-changed{
          .el-icon-success{
            display: inline-block;
          }
        }
      }
    }
  }
</style>
